<template>
    <img :src="musicDetail.al.picUrl" alt="" class="bgmTop">
    <div class="ItemMusicDetail">
        <!-- 歌单详情页面的顶部部分 -->
        <div class="ItemMusicDetailTop">
            <!-- 顶部左边部分 -->
            <div class="ItemMusicDetailTopLeft">
                <svg class="icon" aria-hidden="true" @click="backHome">
                    <use xlink:href="#icon-fanhui3"></use>
                </svg>  
                <div class="gx">
                    <!-- <p>{{ musicDetail.al.name }}</p> -->
                    <!-- 此处使用跑马灯 -->
                    <Vue3Marquee class="name">{{ musicDetail.al.name }}</Vue3Marquee>
                    <div class="author">
                        <span v-for="item in musicDetail.ar" :key="item">{{ item.name }}</span>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-youjiantou"></use>
                        </svg> 
                    </div>

                </div>
            </div>
            <!-- 顶部右边部分 -->
            <div class="ItemMusicDetailTopRight">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fenxiang2"></use>
                </svg>  
            </div>
        </div>
        <!-- 磁盘内容部分 -->
        <div class="ItemMusicDetailContent" v-show="!isLyricShow">
            <!-- 磁针 -->
            <img src="@/assets/needle-ab.png" alt="" class="needle_ab" v-if="isPlayShow">
            <img src="@/assets/needle-ab.png" alt="" v-else :class="{needle_ab_active:!isPlayShow}">
            <!-- 磁盘 -->
            <img src="@/assets/disc_default.png" alt="" class="disc_default">
            <img :src="musicDetail.al.picUrl" alt="" class="picUrl" @click="isLyricShow = true"
             :class="{picUrl_active:!isPlayShow,picUrl_paused:isPlayShow}">
        </div>
        <!-- 歌曲歌词部分 -->
        <div class="ItemMusicDetailLyric" ref="musicLyric" v-show="isLyricShow">
            <!-- {{ lyricList.lyric }}
            {{ lyric }} -->

            <p v-for="item in lyric" :key="item" :class="{active:((currentTime*1000 >=item.time) 
                && (currentTime*1000<item.pre))}">{{ item.lrc }}</p>
        </div>
        <!-- 底部部分 -->
        <div class="ItemMusicDetailFooter">
            <div class="top">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-aixin"></use>
                </svg> 
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-download"></use>
                </svg> 
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-guangpan"></use>
                </svg> 
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-pinglun"></use>
                </svg> 
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-liebiao-"></use>
                </svg> 
            </div>
            <!-- 进度条 -->
            <div class="content">
                <input type="range" min="0" :max="duration" v-model="currentTime" step="0.5">
                <div class="time">
                    <span>{{ changeTime(currentTime) }}</span>
                    <span>{{ changeTime(duration) }}</span>
                </div>
            </div>
            <div class="footer">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofang-xunhuanbofang"></use>
                </svg> 
                <svg class="icon" aria-hidden="true" @click="goPlay(-1)">
                    <use xlink:href="#icon-shangyishoushangyige"></use>
                </svg> 
                <svg class="icon" aria-hidden="true" v-if="isPlayShow" @click="play">
                    <use xlink:href="#icon-bofang2"></use>
                </svg> 
                <svg class="icon" aria-hidden="true" v-else @click="play">
                        <use xlink:href="#icon-zanting2"></use>
                    </svg> 
                <svg class="icon" aria-hidden="true" @click="goPlay(1)">
                    <use xlink:href="#icon-xiayigexiayishou"></use>
                </svg> 
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-bofangliebiao"></use>
                </svg> 
            </div>
        </div>
    </div>
</template>

<script>
import { Vue3Marquee } from 'vue3-marquee'
import { mapMutations, mapState } from 'vuex';

export default {
    data() {
        return {
            isLyricShow:false
        }
    },
    computed: {
        ...mapState(['lyricList','currentTime','playListIndex','playList','duration']),

        // 渲染的时候就显示歌词
        lyric: function () {
            // 声明一个变量
            let arr;
            // console.log(this.lyricList.lyric)
            // 先判断歌曲是否有歌词，如果有,则对此部分使用split进行分隔
            if (this.lyricList.lyric) {
                arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item, i) =>{
                    // 声明变量存储想要的数据,slice包头不包尾
                    // 分割分钟
                    let min = item.slice(1, 3);
                    // 分割秒
                    let sec = item.slice(4, 6);
                    // 分割毫秒
                    let mill = item.slice(7, 10);
                    // 分割歌词部分
                    let lrc = item.slice(11, item.length)
                    // 计算歌曲总时间
                    let time = parseInt(min)*60*1000+parseInt(sec)*1000+parseInt(mill)

                    // 对毫秒数据部分分析，会发现获得的数据会有‘]’,则需要重新分割
                    if (isNaN(Number(mill))) {
                        mill = item.slice(7, 9);
                        lrc = item.slice(10, item.length)
                        time = parseInt(min) * 60 * 1000 + parseInt(sec) * 1000 + parseInt(mill)
                    }

                    return {min,sec,mill,lrc,time}
                })
                arr.forEach((item, i) => {
                    // 当歌词播放到最后一首的时候，歌词并没有出现对应的样式
                    // 那是因为最后一句歌词拿到的time为nan
                    if (i == arr.length - 1 || isNaN(arr[i+1].time)) {
                        item.pre = 10000
                    } else {
                        // 下一句歌词的时间
                        item.pre = arr[i+1].time
                    }
                });
            }
            // console.log(arr)
            return arr
        }
    },
    mounted() {
        // console.log(this.musicDetail)   
        // 实现渲染
        this.addDuration()
      
    },
    updated() { 
        this.addDuration()
    },
    
    // 接收在底部组件传过来的数据
    props: ['musicDetail','play','isPlayShow','addDuration'],
    methods: {
        ...mapMutations(['updateDetailShow','updatePlayList','updatePlayListIndex','updateDuration']),  
        backHome: function () {
            this.isLyricShow = false
            this.updateDetailShow()
        },
        goPlay: function (num) {
            let counter = this.playListIndex + num
            if (counter < 0) {
                counter = this.playList.length-1
            }
            else if (counter == this.playList.length) {
                counter = 0
            }
            this.updatePlayListIndex(counter)
            
        },
        changeTime :function(num) {
            let minutes = Math.floor(num / 60);
            let seconds = num % 60;
            if (seconds < 10) {
                seconds = "0" + seconds; 
            }
            if (minutes < 10) {
                minutes = "0" + minutes;
            }
            return `${minutes}:${seconds}`.slice(0,5);
        }
    },
    watch: {
        currentTime: function (newValue) {
            let p = document.querySelector('p.active')
            // console.log([p])
            if (p != null) {
                if (p.offsetTop > 400) {
                    this.$refs.musicLyric.scrollTop = p.offsetTop - 400
                } 
            }
            if (newValue == this.duration) {
                this.updatePlayListIndex(this.playListIndex+1)
            }
     }   
    },
    components: {
        Vue3Marquee
    }
}
</script>


<style lang="less" scoped>
// 设置背景图片的样式
.bgmTop{
    width: 100%;
    height: 100%;
    position: absolute;
    // 设置图片在底层，这样就添加内容信息啦
    z-index: -1;
    // 设置背景的模糊度
    filter: blur(10vw);
    padding: 0;
    margin: 0;
}
.ItemMusicDetail{
    width: 100%;
    height: 100%;
    // 顶部部分
    .ItemMusicDetailTop{
        width: 100%;
        // margin-top: 3vh;
        height: 10vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .ItemMusicDetailTopLeft{
            display: flex;
            align-items: center;
            
            >.icon{
                width: 10vw;
                height: 10vw;
                margin-left: 2vw;
            }
            .gx{
                
                margin-left: 2vw;
                .name{
                    width: 30vw;
                    font-size: 4.5vw;
                    color: #dcb4b4;
                    
                }
                .author{
                    width: 60vw;
                    display: flex;
                    align-items: center;
                    span{
                        font-size: 3.5vw;
                        color: #615757;
                        margin-right: 1vw;
                    }
                    .icon{
                        margin-left: 1vw;
                        width: 4vw;
                        height: 4vw;
                    }
                }
            }
        }

        .ItemMusicDetailTopRight{
            margin-right: 6vw;
            .icon{
                width: 10vw;
                height: 10vw;
            }
        }
    }
    
    // 内容部分
    .ItemMusicDetailContent{
        width: 100%;
        height: 60vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        margin-top: 2vh;
        .needle_ab{
            width:30vw;
            // height: 7.92vh;
            // height: 17vh;
            position: absolute;
            left:46%;
            // 设置圆点
            transform-origin: 0 0;
            transform: rotate(-18deg);
            transition: all 2s; 
        }
        .needle_ab_active{
            width:30vw;
            // height: 7.92vh;
            // height: 17vh;
            position: absolute;
            left:46%;
            // 设置圆点
            transform-origin: 0 0;
            transform: rotate(-3deg);
            transition: all 2000ms;
        }

        .disc_default{
            width: 80vw;
            height: 80vw;
            border-radius: 50%;
            position: absolute;
            top:12vh;
            z-index: -1;
        }
        .picUrl{
            width: 51vw;
            height: 51vw;
            border-radius: 50%;
            position: absolute;
            top: 18.5vh;
            animation: picUrl 10s linear infinite;
        }
        .picUrl_active{
            animation-play-state: running;
        }
        .picUrl_paused{
            animation-play-state: paused;
        }

        @keyframes picUrl {
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }
    }
    // 歌词部分
    .ItemMusicDetailLyric{
        width: 100%;
        height: 60vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 5vh;
        overflow: scroll;
        p{
            font-size: 4vw;
            color: azure;
            margin-bottom: 2vh;
            text-align: center;
        }
        .active{
           
            font-size: 6vw;
            color:rgb(58, 223, 235);
        }

    }
    // 底部部分
    .ItemMusicDetailFooter{
        width: 100%;
        position: absolute;
        bottom: 3vh;
        .top{
            display: flex;
            margin-left: 3vw;
            margin-right: 3vw;
            justify-content: space-between;
            align-items: center;
            .icon{
                width: 8vw;
                height: 8vw;
                fill: white;
            }
            
        }
        .content{
            height: 8vh;
            width: 100%;
            // display: flex;
            text-align: center;
            input{
                width: 96%;
                height: 3px;
                // line-height: 8vh;
                margin-top: 3vh;
            }
            .time{
                display: flex;
                margin-left: 3vw;
                margin-right: 3vw;
                justify-content: space-between;
                span{
                    font-size: 4vw;
                    margin-top: 1vh;
                }
            }
        }
        .footer{
            display: flex;
            align-items: center;
            margin-left: 5vw;
            margin-right: 5vw;
            justify-content: space-between;

            .icon:nth-child(1),:nth-child(5){
                width:6vw ;
                height: 6vw;
                fill: white;
            }
            .icon:nth-child(2),:nth-child(4){
                width: 7vw;
                height: 7vw;
                fill: white;
            }

        }
    }
}



</style>